<template>
<div class="content">
  <van-swipe class="my-swipe" :autoplay="4000" indicator-color="white">
    <van-swipe-item>
      <div class="imgDiv" :style="{background: 'url(' + bgUrl + ')', backgroundSize:'cover', backgroundPosition: 'center'}"></div>
    </van-swipe-item>
  </van-swipe>
  <van-row class="mt10">
    <van-col span="6" class="navIcon" v-for="item in topNavData" @click.native="jump(item)">
      <div class="icon">
        <van-icon :name="item.icon" />
      </div>
      <p class="mt10">{{item.title}}</p>
    </van-col>
  </van-row>
  <van-divider />
  <van-row>
    <van-col span="24" class="nums">
      <div class="statistics" v-for="item in statisticsData">
        <div class="mt4">{{item.groundTypeName}}</div>
        <div class="mt4">{{item.total}}</div>
      </div>
    </van-col>
  </van-row>
  <div class="divder"></div>
  <div class="activityList mt10">
    <van-row class="px12 pb6">
      <van-col span="12" class="text-left title">志愿活动</van-col>
      <van-col span="12" class="text-right btn" @click="showMoreActi">查看更多</van-col>
    </van-row>
    <div class="">
      <van-tabs v-model="activeTab" v-if="tabList && tabList.length >0" @change="tabChange()">
        <van-tab name="-1">
          <div slot="title">
            <p class="top">全部</p>
            <p class="num">{{getTotal()}}</p>
          </div>
        </van-tab>
        <van-tab v-for="item in tabList" :name="item.status">
          <div slot="title">
            <p class="top">{{item.statusName}}</p>
            <p class="num">{{item.total}}</p>
          </div>
        </van-tab>
      </van-tabs>
      <div class="contents">
        <van-cell v-for="(item,index) in dataList" :key="index" class="dateItem" @click="handleDetail(item)" clickable>
          <span :class="setStatusColor(item)" class="statusTagSize">
            <span :class="setStatusBorderColor(item)">
              {{item.statusStr}}
            </span>
          </span>
          <div class="card">
            <van-row>
              <van-col :span="5">
                <div class="activityImg" :style="{background: 'url(' + setPreviewUrl(item) + ')', backgroundSize:'cover', backgroundPosition: 'center'}"></div>
              </van-col>
              <van-col :span="19">
                <p style="font-weight:bolder" class="textEllipsis">{{item.activityName}}</p>
                <p class="remark textEllipsis">
                  <van-icon name="location-o" class="mr4" />{{item.address}}
                </p>
                <p class="remark textEllipsis">
                  <van-icon name="cluster-o" class="mr4" />{{item.groundName}}
                </p>
              </van-col>
            </van-row>
          </div>
          <p class="distAlign mt4" style="color:#666666;">
            <span>服务类别：{{item.serveCategoryStr}}</span>
          </p>
          <p style="color:#666666" class="textEllipsis">活动时间：{{item.startDate}} 至 {{item.endDate}}</p>
        </van-cell>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import Activity from '@/views/activities/index.vue'

export default {
  name: "Home",
  components: {
    Activity
  },
  data() {
    return {
      msg: "我是首页",
      topNavData: [{
        title: '阵地管理',
        path: '/ground',
        icon: 'location'
      }, {
        title: '实践资讯',
        path: '/info',
        icon: 'coupon'
      }, {
        title: '品牌项目',
        path: '/project',
        icon: 'award'
      }, {
        title: '志愿活动',
        path: '/activities',
        icon: 'like'
      }],
      statisticsData: [],
      dataList: [],
      bgUrl: require('../../assets/images/banner1.png'),
      activeTab: "-1",
      tableList: [],
      ingImg: require('../../assets/images/ing.png'),
      endImg: require('../../assets/images/end.png'),
      notImg: require('../../assets/images/not.png'),
      tabList:[]
    };
  },
  created() {
    this.init();
    this.getActiData()
  },
  mounted() {
  },
  methods: {
    init() {
      let me = this;
      me.$api.getCountByType().then(res => {
        me.statisticsData = res;
      })
      me.$api.getCountByActiStatus({
        dto: {}
      }).then(res => {
        me.tabList = res;
      })
    },
    getActiData() {
      let me = this;
      let search = me.activeTab == '-1' ? {} : {
        status: me.activeTab
      };
      me.$api.getActivitiesList({
        pageParam: {
          pageNum: 1,
          pageSize: 5
        },
        dto: search
      }).then(res => {
        me.dataList = res.dataList
      })
    },
    jump(item) {
      this.$router.push(item.path);
    },
    showMoreActi() {
      this.$router.push('/activities');
    },
    getTotal() {
      let me = this;
      let total = 0;
      if (me.tabList.length > 0) {
        total = me.$utils.funCalc(me.tabList.map(x => x.total), 1, 0)
      } else {
        total = 0
      }
      return total
    },
    handleDetail(item) {
      this.$router.push({
        path: '/activities/detail',
        query: {
          id: item.activityId,
          title: item.activityName
        }
      })
    },
    setStatusColor(item) {
      let className = "";
      if (item.status == 5) {
        className = "color5"
      } else if (item.status == 10) {
        className = "color10"
      } else {
        className = "color20"
      }
      return className
    },
    setStatusBorderColor(item) {
      let className = "";
      if (item.status == 5) {
        className = "borderColor5"
      } else if (item.status == 10) {
        className = "borderColor10"
      } else {
        className = "borderColor20"
      }
      return className
    },
    setPreviewUrl(val) {
      if (val.coverImage && val.coverImage.length > 0) {
        // return this.defaultImg
        return process.env.VUE_APP_BASE_URL + 'admin/upms/file/download?filename=' + val.coverImage[0]
      } else {
        return this.defaultImg
      }
    },
    tabChange() {

    }
  },
};
</script>

<style lang="scss" scoped>
.content {
    height: 100%;
    overflow-y: scroll;
}
.navIcon {
    text-align: center;
    .icon {
        display: inline-block;
        width: 1.5rem;
        height: 1.5rem;
        line-height: 1.88rem;
        vertical-align: middle;
        // background-color: #eb4446;
        border: 0.05rem solid #eb4446;
        color: #eb4446;
        border-radius: 50%;
    }
}
.nums {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0.2rem 0.2rem;
}
.statistics {
    width: 22%;
    text-align: center;
    height: 1rem;
    font-size: 0.35rem;
    // border: 1px solid #f19838;
    // background-color: #1989fa;
    border-radius: 10px;
    color: #f34b47;
}
.statistics:not(:nth-child(4n)) {
    margin-right: calc(12% / 3);
}
.activityList {
    .title {
        font-size: 0.4rem;
    }
    .btn {
        font-size: 0.35rem;
        color: #999999;
    }
}
.divder {
    width: 100%;
    height: 0.2rem;
    background-color: #f5f5f5;
}
.contents {
    padding: 0.2rem;
    background-color: #f5f5f5;
}
.activityImg {
    display: inline-block;
    width: 1.6rem;
    vertical-align: middle;
    height: 1.5rem;
}
</style>
